<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 产后记录</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #ffffff;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 12px 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding-bottom: 20px;
            }
            .form-section {
                background-color: #ffffff;
                margin-bottom: 12px;
            }
            .form-header {
                padding: 12px 16px;
                font-size: 15px;
                font-weight: 600;
                color: #333;
                border-bottom: 1px solid #f0f0f0;
            }
            .form-group {
                padding: 16px;
                border-bottom: 1px solid #f0f0f0;
            }
            .form-group:last-child {
                border-bottom: none;
            }
            .form-label {
                font-size: 14px;
                color: #666;
                margin-bottom: 10px;
            }
            .date-picker {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 8px;
            }
            .date-field {
                flex: 1;
                height: 40px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 0 12px;
                font-size: 14px;
                color: #333;
                background-color: #f9f9f9;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .recovery-options {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                margin-top: 8px;
            }
            .recovery-option {
                flex: 0 0 calc(33.333% - 8px);
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 10px 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666;
                background-color: #f9f9f9;
            }
            .recovery-option.selected {
                border-color: #ff9fb5;
                background-color: #fff0f3;
                color: #ff9fb5;
            }
            .recovery-icon {
                font-size: 20px;
                margin-bottom: 4px;
            }
            .recovery-label {
                font-size: 12px;
            }
            .symptom-options {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 8px;
            }
            .symptom-option {
                flex: 0 0 calc(25% - 8px);
                border: 1px solid #e0e0e0;
                border-radius: 20px;
                padding: 8px 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;
                color: #666;
                background-color: #f9f9f9;
            }
            .symptom-option.selected {
                border-color: #ff9fb5;
                background-color: #fff0f3;
                color: #ff9fb5;
            }
            .symptom-option i {
                font-size: 16px;
                margin-bottom: 2px;
            }
            .mood-options {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
                margin-top: 8px;
                padding: 0 8px;
            }
            .mood-option {
                flex: 0 0 calc(20% - 14px);
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;
                color: #666;
            }
            .mood-option.selected {
                color: #ff9fb5;
            }
            .mood-emoji {
                font-size: 28px;
                margin-bottom: 4px;
            }
            .slider-container {
                margin-top: 16px;
            }
            .slider-header {
                display: flex;
                justify-content: space-between;
                margin-bottom: 6px;
            }
            .slider-label {
                font-size: 14px;
                color: #666;
            }
            .slider-value {
                font-size: 14px;
                font-weight: 500;
                color: #333;
            }
            .slider {
                width: 100%;
                height: 6px;
                background-color: #e0e0e0;
                border-radius: 3px;
                position: relative;
            }
            .slider-fill {
                position: absolute;
                height: 100%;
                background-color: #ff9fb5;
                border-radius: 3px;
            }
            .slider-thumb {
                position: absolute;
                width: 20px;
                height: 20px;
                background-color: white;
                border: 2px solid #ff9fb5;
                border-radius: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }
            .slider-steps {
                display: flex;
                justify-content: space-between;
                margin-top: 8px;
            }
            .slider-step {
                font-size: 12px;
                color: #999;
                text-align: center;
                flex: 1;
            }
            .nursing-record {
                margin-top: 12px;
            }
            .nursing-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }
            .nursing-title {
                font-size: 14px;
                font-weight: 500;
                color: #333;
            }
            .nursing-controls {
                display: flex;
                gap: 6px;
            }
            .nursing-btn {
                width: 24px;
                height: 24px;
                border-radius: 12px;
                background-color: #f0f0f0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #666;
                font-size: 12px;
            }
            .nursing-btn.selected {
                background-color: #ff9fb5;
                color: white;
            }
            .nursing-times {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 8px;
            }
            .nursing-time-item {
                background-color: #f9f9f9;
                border-radius: 16px;
                padding: 4px 10px;
                font-size: 12px;
                color: #666;
                display: flex;
                align-items: center;
            }
            .nursing-time-item i {
                margin-left: 4px;
                color: #999;
            }
            .note-field {
                width: 100%;
                height: 80px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                padding: 12px;
                font-size: 14px;
                color: #333;
                background-color: #f9f9f9;
                margin-top: 8px;
                resize: none;
            }
            .submit-btn {
                display: block;
                width: calc(100% - 32px);
                height: 48px;
                margin: 24px 16px;
                background-color: #ff9fb5;
                color: white;
                font-size: 16px;
                font-weight: 500;
                border-radius: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .submit-btn:disabled {
                background-color: #f0f0f0;
                color: #999;
            }
            .delete-btn {
                display: block;
                width: calc(100% - 32px);
                height: 48px;
                margin: 0 16px 16px;
                background-color: white;
                color: #f44336;
                font-size: 16px;
                font-weight: 500;
                border-radius: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #f44336;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-arrow-left mr-4"></i>
                    <h1 class="text-lg font-medium">产后记录</h1>
                </div>
                <div>
                    <i class="fas fa-question-circle text-gray-400"></i>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 日期选择区域 -->
                <div class="form-section">
                    <div class="form-header">日期选择</div>
                    <div class="form-group">
                        <div class="form-label">选择记录日期</div>
                        <div class="date-field">
                            <span>2023-07-15</span>
                            <i class="fas fa-calendar-alt text-gray-400"></i>
                        </div>
                    </div>
                </div>

                <!-- 身体恢复状况 -->
                <div class="form-section">
                    <div class="form-header">身体恢复状况</div>
                    <div class="form-group">
                        <div class="form-label">整体恢复感受</div>
                        <div class="recovery-options">
                            <div class="recovery-option">
                                <div class="recovery-icon"><i class="fas fa-frown"></i></div>
                                <div class="recovery-label">不适</div>
                            </div>
                            <div class="recovery-option">
                                <div class="recovery-icon"><i class="fas fa-meh"></i></div>
                                <div class="recovery-label">一般</div>
                            </div>
                            <div class="recovery-option selected">
                                <div class="recovery-icon"><i class="fas fa-smile"></i></div>
                                <div class="recovery-label">良好</div>
                            </div>
                        </div>
                    </div>

                    <!-- 伤口恢复 -->
                    <div class="form-group">
                        <div class="form-label">产后伤口恢复</div>
                        <div class="slider-container">
                            <div class="slider-header">
                                <span class="slider-label">恢复程度</span>
                                <span class="slider-value">6/10</span>
                            </div>
                            <div class="slider">
                                <div class="slider-fill" style="width: 60%"></div>
                                <div class="slider-thumb" style="left: 60%"></div>
                            </div>
                            <div class="slider-steps">
                                <div class="slider-step">不适</div>
                                <div class="slider-step">轻微疼痛</div>
                                <div class="slider-step">恢复中</div>
                                <div class="slider-step">良好</div>
                                <div class="slider-step">完全恢复</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 泌乳记录 -->
                <div class="form-section">
                    <div class="form-header">泌乳记录</div>
                    <div class="form-group">
                        <div class="form-label">哺乳方式</div>
                        <div class="recovery-options">
                            <div class="recovery-option selected">
                                <div class="recovery-icon"><i class="fas fa-baby"></i></div>
                                <div class="recovery-label">纯母乳</div>
                            </div>
                            <div class="recovery-option">
                                <div class="recovery-icon"><i class="fas fa-pump-medical"></i></div>
                                <div class="recovery-label">挤奶喂养</div>
                            </div>
                            <div class="recovery-option">
                                <div class="recovery-icon"><i class="fas fa-wine-bottle"></i></div>
                                <div class="recovery-label">混合喂养</div>
                            </div>
                            <div class="recovery-option">
                                <div class="recovery-icon"><i class="fas fa-prescription-bottle"></i></div>
                                <div class="recovery-label">配方奶粉</div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="nursing-header">
                            <div class="nursing-title">哺乳次数与时间</div>
                            <div class="nursing-controls">
                                <div class="nursing-btn selected">L</div>
                                <div class="nursing-btn">R</div>
                                <div class="nursing-btn"><i class="fas fa-plus"></i></div>
                            </div>
                        </div>
                        <div class="nursing-times">
                            <div class="nursing-time-item">06:30 (左 15分钟) <i class="fas fa-times-circle"></i></div>
                            <div class="nursing-time-item">09:45 (右 20分钟) <i class="fas fa-times-circle"></i></div>
                            <div class="nursing-time-item">13:20 (左 18分钟) <i class="fas fa-times-circle"></i></div>
                            <div class="nursing-time-item">16:10 (左 12分钟) <i class="fas fa-times-circle"></i></div>
                        </div>
                    </div>
                </div>

                <!-- 情绪状态 -->
                <div class="form-section">
                    <div class="form-header">情绪状态</div>
                    <div class="form-group">
                        <div class="form-label">今日情绪</div>
                        <div class="mood-options">
                            <div class="mood-option">
                                <div class="mood-emoji">😊</div>
                                <span>开心</span>
                            </div>
                            <div class="mood-option selected">
                                <div class="mood-emoji">😌</div>
                                <span>平静</span>
                            </div>
                            <div class="mood-option">
                                <div class="mood-emoji">😢</div>
                                <span>忧伤</span>
                            </div>
                            <div class="mood-option">
                                <div class="mood-emoji">😠</div>
                                <span>烦躁</span>
                            </div>
                            <div class="mood-option">
                                <div class="mood-emoji">😫</div>
                                <span>疲惫</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 睡眠质量 -->
                <div class="form-section">
                    <div class="form-header">睡眠记录</div>
                    <div class="form-group">
                        <div class="form-label">睡眠质量</div>
                        <div class="recovery-options">
                            <div class="recovery-option">
                                <div class="recovery-icon"><i class="fas fa-tired"></i></div>
                                <div class="recovery-label">很差</div>
                            </div>
                            <div class="recovery-option">
                                <div class="recovery-icon"><i class="fas fa-meh"></i></div>
                                <div class="recovery-label">一般</div>
                            </div>
                            <div class="recovery-option selected">
                                <div class="recovery-icon"><i class="fas fa-bed"></i></div>
                                <div class="recovery-label">良好</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-label">睡眠时长（小时）</div>
                        <div class="slider-container">
                            <div class="slider-header">
                                <span class="slider-label">总时长</span>
                                <span class="slider-value">5.5小时</span>
                            </div>
                            <div class="slider">
                                <div class="slider-fill" style="width: 55%"></div>
                                <div class="slider-thumb" style="left: 55%"></div>
                            </div>
                            <div class="slider-steps">
                                <div class="slider-step">0-2</div>
                                <div class="slider-step">2-4</div>
                                <div class="slider-step">4-6</div>
                                <div class="slider-step">6-8</div>
                                <div class="slider-step">8+</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 症状记录 -->
                <div class="form-section">
                    <div class="form-header">不适症状</div>
                    <div class="form-group">
                        <div class="form-label">选择今日症状（可多选）</div>
                        <div class="symptom-options">
                            <div class="symptom-option">
                                <i class="fas fa-tint"></i>
                                <span>恶露</span>
                            </div>
                            <div class="symptom-option selected">
                                <i class="fas fa-baby"></i>
                                <span>乳房胀痛</span>
                            </div>
                            <div class="symptom-option">
                                <i class="fas fa-tired"></i>
                                <span>疲劳</span>
                            </div>
                            <div class="symptom-option">
                                <i class="fas fa-head-side-virus"></i>
                                <span>头痛</span>
                            </div>
                            <div class="symptom-option">
                                <i class="fas fa-weight"></i>
                                <span>水肿</span>
                            </div>
                            <div class="symptom-option">
                                <i class="fas fa-toilet"></i>
                                <span>便秘</span>
                            </div>
                            <div class="symptom-option">
                                <i class="fas fa-thermometer-half"></i>
                                <span>发热</span>
                            </div>
                            <div class="symptom-option">
                                <i class="fas fa-plus-circle"></i>
                                <span>其他</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 备注 -->
                <div class="form-section">
                    <div class="form-header">备注</div>
                    <div class="form-group">
                        <div class="form-label">添加备注（可选）</div>
                        <textarea
                            class="note-field"
                            placeholder="在这里记录今日其他情况，如营养摄入、活动、心理状态等"
                        ></textarea>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <button class="submit-btn">保存记录</button>

                <!-- 删除按钮 -->
                <button class="delete-btn">删除记录</button>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-book-medical text-xl mb-1"></i>
                    <span>知识库</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
